<template>

        <div id="nav-menu" class="nav-menu" @mouseenter="addActive($event)" @mouseleave="removeActive($event)">
            <div id="nav-right">
                <ul id="nav-right-list">
                    <li class="nav-right-item">
                        <i class="el-icon-s-home"></i>
                        <router-link to="/" >首页</router-link>
                    </li>
                    <li class="nav-right-item">
                        <i class="el-icon-s-management"></i>
                        <router-link to="/sort">归档</router-link>
                    </li>
                    <li class="nav-right-item">
                        <i class="el-icon-chat-dot-round"></i>
                        <router-link to="/messageBoard">留言</router-link>
                    </li>
                    <li class="nav-right-item">
                        <i class="el-icon-ship"></i>
                        <router-link to="/blogLink">朋友</router-link>
                    </li>
                    <li class="nav-right-item">
                        <i class="el-icon-cpu"></i>
                        <router-link to="/about">我</router-link>
                    </li>
                    <li class="nav-right-item">
                        <i class="el-icon-monitor"></i>
                        <router-link to="/login">后台</router-link>
                    </li>
                </ul>
            </div>
            <div id="nav-left">
                <div class="block">
                    <el-avatar class="el-avatar" :src="Url"></el-avatar>
                    <span style="">{{websiteName}}</span>
                </div>
            </div>
        </div>
</template>

<script>
    import {getWebSiteName} from "@/api/header"

    import {ref} from 'vue';

    export default {
        name: "header",
        setup() {
            const websiteName = ref('');
            const Url = ref('http://img.rui61.cn/images/2020/07/05/v2-ace7011d917098efdca1982172d9fb9e_720w.md.jpg')
            const uid = '22';
            getWebSiteName(uid).then(res => {
                websiteName.value = res.data.data.websiteName;
                Url.value=res.data.data.imgUrl;
            });
            //鼠标滑过头部变透明
            function addActive($event) {
                $event.currentTarget.className='nav-menu';
            }
            function removeActive($event){
                $event.currentTarget.className='nav-menu-on';
            }

            return {Url, websiteName,addActive,removeActive};
        }
    }
</script>

<style scoped>
    #nav-menu{
        z-index: 110;
        position: fixed;
        top: 0;
    }
    .nav-menu {
        width: 100%;
        height: 64px;
        -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .1);
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .1);
        background: #fff;

    }
    .nav-menu-on{
        width: 100%;
        height: 64px;
        -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .1);
        background-color: rgba(255,255,255,.2);
        box-shadow: initial;


    }


    #nav-menu #nav-right {
        height: 64px;
        float: right;
    }

    #nav-menu #nav-left {
        height: 64px;
        float: left;
    }

    #nav-left .block {
        font-family: initial;
        margin-left: 10px;
        position: relative;
        line-height: 64px;
    }

    #nav-left .el-avatar {
        height: 35px;
        width: 35px;
        margin: 14.5px 5px 0 0;
        float: left;
        border-radius: 50%;
        transition: all .5s;
        box-shadow: 0 0 6px 0.5px rgba(0, 0, 0, .1);

    }

    #nav-left .el-avatar:hover {
        transform: rotate(360deg);
    }

    #nav-right-list {
        float: left;
        margin-left: 50px;
        overflow: hidden;
    }
    #nav-menu a {
        font-size: 20px;
        display: inline-block;
    }
    #nav-right-list li a {
        color: #333;
        text-decoration: none;

    }

    .nav-right-item {
        float: left;
        /*display: block;*/
        font-size: 20px;
        padding: 0 16px;
        display: inline-block;
        position: relative;
    }
</style>